<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			 /* 练习：1 圆形  2.正三角形
			 思路1：宽高与边框倒角一致*/
			div#cirle{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				border-radius:20%;
				/* 边框阴影属性：box-shadow  属性 */
				box-shadow: 5px 5px 50px 80px black inset;
			}
			/*思路2：div#d1   css中：抓到div
						    左边框：50像素实线红色
						 	右边框：50像素实线黄色
						 	下边框：50像素实线黑色
			注意：先别加宽高  tranpa 透明色*/
			div#triangle{
				width: 0;
			  /*  border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid black;*/
				/* 两行：倒三角，蓝色 ，透明度   .3 
				提醒：所有边框：   50px  solider transparent
			                      上边框颜色改成蓝色    0,0,255
			}*/
		    border:90px solid transparent;
			border-left-color: rgba(0, 0, 255, 1);
			}
			/* outline       边框轮廓   只针对input  元素*/
			input{
				outline: 1px solid blue;
			}
			/* 实际应用：通配选择器  去掉轮廓
			 *{outline： 0;}
			 
			 */
			
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框: <input type="text">
	</body>
</html>